<!-- 题库预览弹窗 -->
<script setup lang='ts'>
import { reactive, nextTick  } from 'vue';
import { tableKeyList, dictionary } from './conf'
import { TableItemType } from '../../types'

const data = reactive({
  list: [],
  getData: false,
  totalNum: 0,
  params: {},
  activeItem: {} as TableItemType,
  previewDialog: false,
})

const showPreviewDialog = async (tableItem: TableItemType) => {
  data.previewDialog = true;
  data.activeItem = tableItem;
  
  // 等待 弹窗内组件渲染完毕，在获取列表数据
  await nextTick()
  data.getData = true;
}

defineExpose({
  showPreviewDialog
})
</script>

<template>
  <div>
    <el-dialog
      v-model="data.previewDialog"
      title="题库预览"
      width="50%"
    >
      <div class="_title">基本信息</div>
      <el-row>
        <el-col :span="24" :offset="1">题库：{{ data.activeItem.title }}</el-col>
        <el-col :span="24" :offset="1">题库副标题：{{ data.activeItem.subTitle }}</el-col>
        <el-col :span="24" :offset="1">题库简介：{{ data.activeItem.brief }}</el-col>
        <el-col :span="24" :offset="1">题库状态：{{ data.activeItem.isEnabled + '' === '1' ? '启用' : '禁用' }}</el-col>
      </el-row>
      <div class="_title">包含题目</div>
      <p class="_mb10">共 {{ data.totalNum }} 道</p>
      <ListView
        :tableKeyList="tableKeyList"
        :list="data.list"
        :dictionary="dictionary"
      /> 
      <Pagination
        url="/training.exam.api/question/list"
        v-model:list="data.list"
        v-model:getData="data.getData"
        :params="{...data.params, poolIds: [data.activeItem.poolId]}"
        @setTotalNum="(num: number) => (data.totalNum = num)"
      ></Pagination>
    </el-dialog>
  </div>
</template>

<style scoped>
._title {
  line-height: 22px;
  color: #333;
  font-size: 18px;
  border-left: 5px solid #3d88f2;
  padding-left: 10px;
  margin: 0 0 20px;
}
.el-row, .el-col {
  margin-bottom: 20px;
}
.el-col:last-child {
  margin-bottom: 0;
}
</style>